<template>
    <div class="manage">
        <div class="manage-header">
            <el-form :model="searchForm" :inline="true" label-width="90px">
                <el-form-item label="名称/标识">
                    <el-input v-model="searchForm.name" clearable size="small" placeholder="支持菜单名称或标识"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="add" size="small">新增菜单</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card shadow="never">
            <el-tree
                :data="tableData"
                :props="defaultProps"
                ref="tree"
                :filter-node-method="filterNode"
                node-key="id">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ data.label }}</span>
                    <span>{{ data.name }}</span>
                    <span>{{ data.path }}</span>
                    <span>{{ data.id === 0 ? '显示' : (data.is_show === 1 ? '是' : '否')  }}</span>
                    <span v-if="data.ops === undefined">
                        <i :class="`el-icon-${data.icon}`"></i>
                    </span>
                    <span v-else>{{ data.icon }}</span>
                    <span>{{ data.url }}</span>
                    <span v-if="data.ops === undefined">
                        <el-button size="mini" type="primary" @click="handleEdit(data)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(data)">删除</el-button>
                    </span>
                    <span>{{ data.ops }}</span>
                </span>
            </el-tree>
        </el-card>

        <el-dialog
            :title="typeof form.id === 'number' ? '编辑菜单' : '新增菜单'"
            :visible.sync="dialogVisible"
            @close="onClosed()"
            width="1200">
            <el-form ref="form" :model="form" :rules="rules" :inline="true"  label-width="100px">
                <el-form-item label="标识" prop="name">
                    <el-input v-model="form.name" size="small" style="width: 200px" placeholder="请输入标识"></el-input>
                </el-form-item>

                <el-form-item label="名称" prop="label">
                    <el-input v-model="form.label" size="small" style="width: 200px" placeholder="请输入名称"></el-input>
                </el-form-item>

                <el-form-item label="路径" prop="path">
                    <el-input v-model="form.path" size="small" style="width: 200px" placeholder="请输入路径"></el-input>
                </el-form-item>

                <el-form-item label="父级菜单" prop="pid">
                    <el-select v-model="form.pid" size="small" style="width: 200px" placeholder="请选择">
                        <el-option label="顶级" :value="0"></el-option>
                        <el-option v-for="item in params.menus" :key="item.id" :label="item.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="显示" prop="is_show">
                    <el-select v-model="form.is_show" size="small" style="width: 200px" placeholder="请选择">
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="图标" prop="icon">
                    <el-input v-model="form.icon" size="small" style="width: 200px" placeholder="请输入图标"></el-input>
                </el-form-item>

                <el-form-item label="视图" prop="url">
                    <el-input v-model="form.url" size="small" style="width: 200px" placeholder="请输入视图文件名"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="handleMenu">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import { getInit, getMenuList, addMenu, editMenu, deleteMenu } from "@/api/menu"

export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                id: '',
                name: '',
                label: '',
                path: '',
                pid: '',
                is_show: '',
                icon: '',
                url: '',
            },
            searchForm: {
                name: ''
            },
            params: {
                menus: []
            },
            tableData: [],
            defaultProps: {
                children: "children",
                label: "path"
            },
            total: 0,
            rules: {
                name: [
                    {required: true, message: '请输入标识', trigger: 'blur'}
                ],
                label: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ],
                path: [
                    {required: true, message: '请输入路径', trigger: 'blur'}
                ],
                pid: [
                    {required: true, message: '请选择', trigger: 'change'}
                ],
                is_show: [
                    {required: true, message: '请选择', trigger: 'change'}
                ],
                icon: [
                    {required: true, message: '请输入图标', trigger: 'blur'}
                ],
                url: [
                    {required: true, message: '请输入视图文件名', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        this.getList()
        this.getInit()
    },
    watch: {
        searchForm: {
            handler(val) {
                this.$refs.tree.filter(val.name)
            },
            deep: true
        }
    },
    methods: {
        getInit() {
            getInit().then(({ data }) => {
                this.params.menus = data.data
            })
        },
        getList() {
            getMenuList({params: {...this.searchForm}}).then(({ data }) => {
                // console.log(data)
                if (typeof data.data !== 'string') {
                    this.tableData = data.data
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1 || data.name.indexOf(value) !== -1
        },
        add() {
            this.dialogVisible = true
            this.form.id = ''
        },
        handleMenu() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.id) {
                        editMenu(this.form.id, this.form).then(({ data }) => {
                            if (data.code === 200) {
                                this.$message.success('编辑菜单成功')
                            } else {
                                this.$message.error(data.data)
                            }
                        })
                    } else {
                        addMenu(this.form).then(({ data }) => {
                            if (data.code === 201) {
                                this.$message.success(data.data)
                            } else {
                                this.$message.error(data.data)
                            }
                        })
                    }

                    this.$refs.form.resetFields()
                    this.getList()
                    this.getInit()
                    this.dialogVisible = false
                }
            })
        },
        handleEdit(row) {
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
        },
        handleDelete(row) {
            this.$confirm('确认要删除该菜单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMenu(row.id).then(({ data }) => {
                    // console.log(data)
                    if (data.code === 200) {
                        this.$message.success(data.data)
                    } else {
                        this.$message.error(data.data)
                    }
                    this.getList()
                })
            }).catch(() => {

            })
        },
        // 对话框关闭的回调
        onClosed() {
            this.$refs.form.resetFields()
        }
    }
}
</script>

<style lang="less" scoped>
.manage {
    height: 90%;

    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-form {
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px 0 0 10px;
            margin-bottom: 15px;
            width: 100%;
        }
    }

    .el-card {
        /deep/.el-card__body {
            padding-bottom: 5px;
        }

        /deep/ div.el-tree-node__content {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: left;

            .custom-tree-node {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: left;

                span {
                    width: 130px;
                    text-align: left;
                }
                span:first-child {
                    text-align: left;
                }

                span:last-child {
                    width: 150px;
                }
            }
        }
    }
}
</style>
